<template>
	<div>
		<div>
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
			  <!-- <el-form-item label="标题">
			    <el-input v-model="formInline.user" placeholder="标题模糊搜索"></el-input>
			  </el-form-item>
			  <el-form-item label="新闻类别">
			    <el-select v-model="formInline.region" placeholder="选择新闻类别">
			      <el-option label="区域一" value="shanghai"></el-option>
			      <el-option label="区域二" value="beijing"></el-option>
			    </el-select>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary">查询</el-button>
			  </el-form-item> -->
				<el-form-item>
			    	<el-button type="primary" v-if="roleActionInfoList.newsListMenu.news_add_action" @click="addNewsDialog = true">添加新闻</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div v-loading.body="loading">
			<el-table :data="newsListData" style="width: 100%" >
		      <el-table-column prop="title" label="标题" width="180" ></el-table-column>
		      <el-table-column label="类别" width="180" prop="news_type" :formatter="filterType"></el-table-column>
		      <el-table-column prop="tags_id" label="标签" :formatter="filterTags" ></el-table-column>
				
		      <el-table-column label="操作">
			      <template scope="scope">
				      	<el-button size="small" type="warning" v-if="scope.row.is_checked == 0 && roleActionInfoList.newsListMenu.news_check_action" @click="editRow(scope.$index,scope.row,'newsCheckDialog')">审核</el-button>

				      	<el-button size="small" type="warning" v-else-if="scope.row.is_checked == 1 && scope.row.is_opened == 0 && roleActionInfoList.newsListMenu.news_check_action" @click="editRow(scope.$index,scope.row,'newsUpDialog')">上架</el-button>

				      	<el-button size="small" type="warning" v-else-if="scope.row.is_checked == 1 && scope.row.is_opened == 1 && roleActionInfoList.newsListMenu.news_check_action" @click="editRow(scope.$index,scope.row,'newsDownDialog')">下架</el-button>

				        <el-button size="small" type="info" v-if="scope.row.is_opened == 0 && roleActionInfoList.newsListMenu.news_edit_action" @click="editNews(scope.$index,scope.row)">编辑</el-button>


			        	<el-button size="small" type="danger" icon="delete" @click="editRow(scope.$index, scope.row,'delDialog')" v-if="roleActionInfoList.newsListMenu.news_del_action"></el-button>
			      </template>
			    </el-table-column>

		    </el-table>
		</div>
		<div class="pagination">
			<el-pagination layout="prev, pager, next" :total="dataCount" @current-change="goToPage" ></el-pagination>
		</div>

		<!-- 审核对话框 -->
		<el-dialog title="新闻审核" :visible.sync="dialog.newsCheckDialog" size="tiny">
		  <span>审核结果</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialog.newsCheckDialog = false">取 消</el-button>
		    <el-button type="primary" @click="newsCheckBtn(1)">通 过</el-button>
		  </span>
		</el-dialog>
		

		<!-- 上架对话框 -->
		<el-dialog title="新闻上架" :visible.sync="dialog.newsUpDialog" size="tiny">
		  <span>是否对外展示该新闻?</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialog.newsUpDialog = false">取 消</el-button>
		    <el-button type="primary" @click="newsUpDownBtn(1)">确 定</el-button>
		  </span>
		</el-dialog>
		
		<!-- 下架对话框 -->
		<el-dialog title="新闻下架" :visible.sync="dialog.newsDownDialog" size="tiny">
		  <span>是否取消对外展示该新闻?</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialog.newsDownDialog = false">取 消</el-button>
		    <el-button type="primary" @click="newsUpDownBtn(0)">确 定</el-button>
		  </span>
		</el-dialog>

		<!-- 新闻删除 -->
		<el-dialog title="删除提示" :visible.sync="dialog.delDialog" size="tiny">
		  <span>确定要删除此记录吗?</span>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialog.delDialog = false">取 消</el-button>
		    <el-button type="primary" @click="delDialogBtn">确 定</el-button>
		  </span>
		</el-dialog>

		<!-- 新闻添加 -->
		<el-dialog title="添加新闻" :visible.sync="addNewsDialog" :modal="false" size="full" v-if="addNewsDialog">
			<addNewsTemplate  @closeAddNewsDialog="closeAddNewsDialog"></addNewsTemplate>
		</el-dialog>
		
		<!-- 新闻编辑 -->
		<el-dialog title="编辑新闻" :visible.sync="editNewsDialog" :modal="false" size="full" v-if="editNewsDialog">
			<editNewsTemplate :editNewsTemplateToSonId="editNewsId" @closeEditNewsDialog="closeEditNewsDialog"></editNewsTemplate>
		</el-dialog>



		
	</div>
</template>


<script>
import _roleAction from '../common/roleAction.vue'
import addNewsTemplate from './addNews.vue'
import editNewsTemplate from './editNews.vue'

import _http from '../common/http.vue'

//富文本
import '../../assets/ueditor/ueditor.config.js'
import '../../assets/ueditor/ueditor.all.min.js'
import '../../assets/ueditor/ueditor.parse.min.js'
import '../../assets/ueditor/lang/zh-cn/zh-cn.js'


    export default {
      data() {
        return {
        	roleActionInfoList:_roleAction.getRoleActionFlag(this,'newsListMenu'),
        	dialog:{
        		delDialog:false,
        		newsCheckDialog:false,
	        	newsUpDialog:false,
	        	newsDownDialog:false,
        	},
        	addNewsDialog:false,
        	editNewsDialog:false,
        	editNewsId:'',

	        newsListData:[],
	        dataCount:0,
	        newsTypeList:[],
	        tagsList:[],

	        formInline:{

	        },
	        
	        newsResultFormInfo:{
	        	id:'',
	        	index:''
	        },
	        nowPageNumber:1,
	        loading:false
        }

      },
    	components:{addNewsTemplate,editNewsTemplate},

      mounted(){
      	this.loading = true
      	this.getNewsTypeList()
      	this.getTagsList()
      },
      methods: {
      	filterType(row,cloumn){
      		let arr = row.news_type.split(',')
      		return this.newsTypeList[arr[arr.length-1]]['name'];
      	},
      	filterTags(row,cloumn){
      		if (row.tags_id) {
      			let strs = row.tags_id.split(',');
      			let strName = '';
      			for (var i = 0; i < strs.length; i++) {
      				if (this.tagsList.hasOwnProperty(strs[i])) {
	      				strName = strName+this.tagsList[strs[i]]['name']+' '
	      			}
      			}
      			return strName;
      		}else{
      			return '';
      		}
      	},
	    goToPage(val){
	    	this.loading = true
	    	this.nowPageNumber = val
            _http.axiosRequest(this,'newsList',{pageNo:val,pageSize:10},(res)=>{
            	this.newsListData = res.data.dataList;
                this.dataCount = res.data.dataCount
                this.loading = false
            })
	    },

	    getNewsTypeList(){
	      	_http.axiosRequest(this,'newsTypeList',{},(res)=>{
            	this.newsTypeList = res.data;
            	this.goToPage(this.nowPageNumber)
            })
	    },
	    getTagsList(){
	      	_http.axiosRequest(this,'tagsNameList',{},(res)=>{
            	this.tagsList = res.data;
            })
	      },
	    editRow(index,row,dialog){
	    	this.newsResultFormInfo.id = row.id
	      	this.newsResultFormInfo.index = index
	      	this.dialog[dialog] = true
	    },  
	    
	      newsCheckBtn(result){
	      	_http.axiosRequest(this,'newsCheckResult',{type:'check',result:result,id:this.newsResultFormInfo.id},(res)=>{
                let result2 = _http.apiResult(this,res.data)
                if (result2) {
                	this.newsListData[this.newsResultFormInfo.index]['is_checked'] = 1
                	this.dialog.newsCheckDialog = false
                }
            })

	      },
	      newsUpDownBtn(result){

	      	_http.axiosRequest(this,'newsCheckResult',{type:'upDown',result:result,id:this.newsResultFormInfo.id},(res)=>{
                let result2 = _http.apiResult(this,res.data)
                if (result2) {
                	if (result == 1) {
            			this.newsListData[this.newsResultFormInfo.index]['is_opened'] = 1
            			this.dialog.newsUpDialog = false
	            	}else{
            			this.newsListData[this.newsResultFormInfo.index]['is_opened'] = 0
            			this.dialog.newsDownDialog = false
	            	}
                }
            })
	      },
	      delDialogBtn(){
	      	_http.axiosRequest(this,'delNews',{id:this.newsResultFormInfo.id},(res)=>{
                let result2 = _http.apiResult(this,res.data)
                if (result2) {
                	this.newsListData.splice(this.newsResultFormInfo.index,1)
    				this.goToPage(this.nowPageNumber)
        			this.dialog.delDialog = false
                }
            })
	      },
	      closeAddNewsDialog(){
	      	this.addNewsDialog = false
	      	this.goToPage(this.nowPageNumber)
	      },
	      closeEditNewsDialog(){
	      	this.editNewsDialog = false
	      	this.goToPage(this.nowPageNumber)
	      },
	      editNews(index,row){
	      	this.editNewsId = row.id
	      	this.editNewsDialog = true
	      },
	  }
    }
  </script>